<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对象解构</title>
</head>

<body>
  <script>
    // 基本解构
    // 解构的变量名必须和对象的属性名一致
    const { uname, age } = {
      uname: '张三',
      age: 15
    }
    console.log(uname, age);

    // 修改解构的变量名
    // 语法:旧变量名 : 新变量名
    const { uname: username, sex } = {
      uname: '李四',
      sex: '男'
    }
    console.log(username, sex);

    // 数组对象解构
    const pig = [{
      pigName: '佩奇',
      pigAge: 15
    }]
    const [{ pigName, pigAge }] = pig
    console.log(pigAge, pigName);

    // 多级解构
    const cat = {
      catName: '小猫',
      family: {
        mother: '妈妈',
        father: '把把'
      },
      catAge: 18
    }
    // 多级解构,要拿到是哪个对象里面的变量
    // family:{变量}
    const { catName, family: { mother, father }, catAge } = cat
    console.log(catName, mother, father, catAge);
  </script>
</body>

</html>